import { Input, View, Text, Textarea } from "@tarojs/components";
import { useEffect, useState } from "react";
import "./index.scss";
import clsx from "clsx";

const QInput = (props) => {
  const {
    type = "text",
    className,
    onChange,
    value,
    disabled = false,
    onConfirm,
    placeholder = "",
    password = false,
    label = "",
    right,
  } = props;
  const [currentValue, setCurrentValue] = useState(value);
  useEffect(() => {
    setCurrentValue(value);
  }, [value]);
  return (
    <View
      className={clsx(
        "a-textarea-container dis-flex align-center pl-24 border-box",
        className
      )}
    >
      <Text className="label fs-28 lh-38 cl-848484">{label}</Text>
      <Textarea
        maxlength={1000}
        disabled={disabled}
        value={currentValue}
        onInput={(e) => {
          onChange?.(e.detail.value);
          setCurrentValue(e.detail.value);
        }}
        onConfirm={onConfirm}
        placeholder={placeholder}
        placeholderClass="cl-C2C2C2"
        className="a-textarea ml-30 border-box"
        autoHeight
      />
      {right}
    </View>
  );
};
export default QInput;
